import React, { useRef } from 'react'
import { useDispatch } from 'react-redux'
import {addGoods } from '../store/slice/goodsSlice'
import { useNavigate } from 'react-router-dom'

export default function AddGoods() {
    const gnameRef = useRef()
    const gpriceRef = useRef()
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const addGood = (e) => {
        e.preventDefault()
        console.log(111);
        let gname = gnameRef.current.value.trim()
        let gprice = gpriceRef.current.value.trim()
        let goods = {
            gname,
            gprice
        }
        // 调用商品切片中的数据，将其添加到商品列表中
        dispatch(addGoods(goods))
        // 添加完商品，跳转到购物车列表
        navigate('/goodslist')
        
    }
  return (
    <div>
      <h3>添加商品</h3>
      <form >
        {/* <p>商品编号： <input type="text" name='' id='' ref={gnameRef} /></p> */}
        <p>商品名称： <input type="text" name='' id=''  ref={gnameRef}/></p>
        <p>商品价格： <input type="text" name='' id='' ref={gpriceRef} /></p>
        <p><button onClick={(e)=> addGood(e)}>添加商品</button></p>
      </form>
    </div>
  )
}
